import React from 'react';
import { Settings, Info, ExternalLink } from 'lucide-react';

// Options页面组件
// 扩展设置和关于信息页面
export const Options: React.FC = () => {
  // 获取扩展版本信息
  const manifest = chrome.runtime.getManifest();
  const version = manifest.version;
  
  return (
    <div className="min-h-screen bg-gray-50">
      {/* 页面头部 */}
      <div className="bg-white border-b border-gray-200">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center py-6">
            <Settings size={24} className="text-primary-600 mr-3" />
            <h1 className="text-2xl font-bold text-gray-900">
              Tab Lite 设置
            </h1>
          </div>
        </div>
      </div>
      
      {/* 主要内容区域 */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid gap-8">
          {/* 关于信息 */}
          <div className="card">
            <div className="flex items-center mb-6">
              <Info size={20} className="text-primary-600 mr-2" />
              <h2 className="text-xl font-semibold text-gray-900">
                关于 Tab Lite
              </h2>
            </div>
            
            <div className="space-y-4 text-gray-600">
              <p>
                Tab Lite 是一个轻量级的 Chrome 扩展，用于保存和管理浏览器标签页集合。
                您可以将当前窗口的标签页保存为命名集合，稍后在新窗口中重新打开。
              </p>
              
              <div className="bg-gray-50 p-4 rounded-lg">
                <h3 className="font-medium text-gray-900 mb-2">主要功能</h3>
                <ul className="list-disc list-inside space-y-1 text-sm">
                  <li>保存当前窗口的所有标签页为集合</li>
                  <li>管理和组织标签页集合</li>
                  <li>在新窗口中批量打开集合中的所有标签页</li>
                  <li>搜索和筛选集合</li>
                  <li>编辑标签页信息和描述</li>
                </ul>
              </div>
              
              <div className="flex items-center justify-between pt-4 border-t border-gray-200">
                <div className="text-sm">
                  <span className="font-medium">版本：</span>
                  <span className="text-gray-500">{version}</span>
                </div>
                
                <div className="flex items-center gap-4 text-sm">
                  <a
                    href="#"
                    className="flex items-center gap-1 text-primary-600 hover:text-primary-700"
                    onClick={(e) => {
                      e.preventDefault();
                      // 创建新标签页，自动显示Dashboard（通过chrome_url_overrides配置）
                      chrome.tabs.create({});
                    }}
                  >
                    <ExternalLink size={14} />
                    打开仪表板
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          {/* 使用说明 */}
          <div className="card">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">
              使用说明
            </h2>
            
            <div className="space-y-6">
              <div>
                <h3 className="font-medium text-gray-900 mb-2">保存标签页集合</h3>
                <p className="text-gray-600 text-sm mb-2">
                  有两种方式可以保存当前窗口的标签页为集合：
                </p>
                <ul className="list-disc list-inside text-sm text-gray-600 space-y-1 ml-4">
                  <li>点击扩展图标，在弹窗中点击"保存当前窗口为集合"</li>
                  <li>在新标签页的仪表板中，点击"保存当前窗口"按钮</li>
                </ul>
              </div>
              
              <div>
                <h3 className="font-medium text-gray-900 mb-2">管理集合</h3>
                <p className="text-gray-600 text-sm mb-2">
                  在仪表板中，您可以：
                </p>
                <ul className="list-disc list-inside text-sm text-gray-600 space-y-1 ml-4">
                  <li>点击集合名称展开/折叠标签页列表</li>
                  <li>点击"打开全部"在新窗口中打开集合中的所有标签页</li>
                  <li>删除不需要的集合</li>
                  <li>编辑单个标签页的信息</li>
                  <li>复制标签页链接</li>
                </ul>
              </div>
              
              <div>
                <h3 className="font-medium text-gray-900 mb-2">搜索集合</h3>
                <p className="text-gray-600 text-sm">
                  在仪表板顶部的搜索框中输入关键词，可以搜索集合名称、标签页标题和URL。
                </p>
              </div>
            </div>
          </div>
          
          {/* 数据说明 */}
          <div className="card">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">
              数据存储
            </h2>
            
            <div className="space-y-4 text-gray-600">
              <p className="text-sm">
                您的集合数据使用 Chrome 浏览器的同步存储功能保存，这意味着：
              </p>
              
              <ul className="list-disc list-inside text-sm space-y-1 ml-4">
                <li>数据会在您登录的所有 Chrome 浏览器中同步</li>
                <li>数据仅存储在您的 Google 账户中，不会发送到第三方服务器</li>
                <li>卸载扩展时，数据不会自动删除</li>
                <li>您可以通过 Chrome 设置清除同步数据</li>
              </ul>
              
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
                <div className="flex items-start">
                  <Info size={16} className="text-blue-600 mt-0.5 mr-2 flex-shrink-0" />
                  <div className="text-sm text-blue-800">
                    <p className="font-medium mb-1">隐私说明</p>
                    <p>
                      Tab Lite 完全在本地运行，不会收集、传输或存储您的任何个人数据到外部服务器。
                      所有数据都通过 Chrome 的官方同步机制进行处理。
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
